<template>
  <div class="liveIndex">
    <NavBar />
    <Guide v-model="showGuide" />
    <div class="container">
      <div class="banner">
        <a v-if="banner.length" target="_blank" :href="banner[0].hyperlink"><img :src="banner[0].imgUrl" title=""></a>
      </div>
      <div style="overflow:hidden;">
        <div class="live-l">
          <!-- 每日推荐 -->
          <div class="daily item">
            <div class="item-h">
              <span class="line"></span>
              <b class="ftz16">每日推荐</b>
            </div>
            <div class="daily-c">
              <div class="fl daily-c-i" v-for="(item,index) in recommend" :key="index">
                <div class="dily-c-i-t">
                  <span class="icon icon-live"></span>
                  正在直播
                </div>
                <router-link :to="`/liveRoom?roomId=${item.roomId}`" class="title ftz16">{{item.topicName}}</router-link>
                <div class="tips">
                  <router-link :to="`/dashboard/live/${item.userId}`" class="photo photo-level">
                    <img :src="item.avatar">
                    <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                  </router-link>
                  <span>{{item.userName}}</span>
                  <span class="fr">
                    <span style="color: #e94f4f;">{{item.visitNum}}</span>人气</span>
                </div>
                <div class="icon icon-lable">{{item.domain}}</div>
              </div>
            </div>
          </div>
          <!-- 实时直播 -->
          <div class="real item">
            <div class="item-h">
              <span class="line"></span>
              <b class="ftz16">实时直播</b>
            </div>
            <div class="real-c">
              <ul>
                <li v-for="(item,index) in realtime" :key="index">
                  <router-link :to="`/dashboard/live/${item.userId}`" class="photo photo-level">
                    <img :src="item.avatar">
                    <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                  </router-link>
                  <div class="info">
                    <div class="info-t">
                      <router-link :to="`/liveRoom?roomId=${item.roomId}`">{{item.userName}}</router-link>
                      <span>{{item.createTime | parseTime('{h}:{i}')}}</span>
                    </div>
                    <div class="info-c" :class="{'private': item.isPrivate}">
                      <span v-html="formatHtml(item.contentText)"></span>
                    </div>
                  </div>
                  <button class="icon entry" @click="$router.push(`/liveRoom?roomId=${item.roomId}`)">点击进入</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="live-r fr">
          <!-- 新晋主播 -->
          <div class="new item">
            <div class="item-h">
              <span class="line"></span>
              <b class="ftz16">新晋主播</b>
            </div>
            <div class="new-c">
              <ul>
                <li v-for="(item,index) in anchor" :key="index">
                  <router-link :to="`/dashboard/live/${item.userId}`" class="photo photo-level">
                    <img :src="item.avatar">
                    <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                  </router-link>
                  <div class="info">
                    <a href="javascript:;" @click="$router.push(`/liveRoom?roomId=${item.roomId}`)" class="name ftz16">{{item.roomName}}</a>
                    <a href="javascript:;" @click="$router.push(`/liveRoom?roomId=${item.roomId}`)" class="theme">直播主题：{{item.topicName}}</a>
                  </div>
                  <div class="icon label">{{item.domain}}</div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 排行榜 -->
          <div class="rank item">
            <div class="item-h">
              <span class="line"></span>
              <b class="ftz16">排行榜</b>
              <span class="fr" id="rank_guid">
                <a href="javascript:;" :class="{on:!rank.type}" @click="getRank(0,1)">人气榜</a>
                <a href="javascript:;" :class="{on:!!rank.type}" @click="getRank(1,1)">活跃榜</a>
              </span>
            </div>
            <div class="rank-c" id="rank_c">
              <div rank>
                <ul>
                  <li v-for="(item,index) in rank.data" :key="index">
                    <router-link :to="`/dashboard/live/${item.userId}`" class="photo photo-level">
                      <img :src="item.avatar">
                      <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                    </router-link>
                    <div class="info">
                      <a href="javascript:;" @click="$router.push(`/liveRoom?roomId=${item.roomId}`)" class="name ftz16">{{item.userName}}</a>
                      <p>
                        <span class="topicNum">{{item.topicNum}}条主题</span>
                        <span>
                          <span class="icon icon-hot"></span>{{!rank.type ? item.visitNum : item.activeNum}}</span>
                      </p>
                    </div>
                    <button class="join" @click="$router.push(`/liveRoom?roomId=${item.roomId}`)">我要参与</button>
                  </li>
                </ul>
                <div class="indicate">
                  <span @click="rankPage(0, rank.page.pageNum < 2)" :class="['icon', 'icon-prev',{'disabled': rank.page.pageNum < 2}]"></span>
                  <span @click="rankPage(1, rank.page.pageNum >= rank.page.pages)" :class="['icon', 'icon-next','',{'disabled': rank.page.pageNum >= rank.page.pages}]"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 精选直播间 -->
      <div class="choice i-item">
        <div class="i-item-h">
          <b class="ftz18">精选直播间</b>
        </div>
        <div class="layui-carousel" id="test1">
          <div carousel-item>
            <div v-for="num in 2" :key="num">
              <div :class="['i-item-c', 'item', {mar25: index === 1 || index === 4}]" v-for="(item,index) in roomChoice" v-if="index < num * 3 && index >= (num-1) * 3" :key="index">
                <div class="i-item-c-h">
                  <b class="ftz18">{{item.type.name}}</b>
                  <p>{{item.type.tip}}</p>
                </div>
                <div class="choice-c">
                  <ul>
                    <li v-for="(ITEM,INDEX) in item.data" :key="INDEX">
                      <router-link :to="`/dashboard/live/${ITEM.userId}`" class="photo photo-level">
                        <img :src="ITEM.avatar">
                      </router-link>
                      <div class="info">
                        <a href="javascript:;" @click="$router.push(`/liveRoom?roomId=${ITEM.roomId}`)" class="title">{{ITEM.roomName}}</a>
                        <p>主题：{{ITEM.topicName}}</p>
                      </div>
                      <span class="fr">
                        <span class="num">
                          <i class="icon icon-num"></i>{{ITEM.visitNum}}</span>
                        <span class="lab">{{ITEM.tags}}</span>
                      </span>
                    </li>
                  </ul>
                  <div class="indicate">
                    <span @click="roomChoicePage(0, item, item.page.pageNum < 2)" :class="['icon', 'icon-prev',{'disabled': item.page.pageNum < 2}]"></span>
                    <span @click="roomChoicePage(1, item, item.page.pageNum >= item.page.pages)" :class="['icon', 'icon-next','',{'disabled': item.page.pageNum >= item.page.pages}]"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 全部直播间 -->
      <div class="all i-item">
        <div class="i-item-h">
          <b class="ftz18">全部直播间</b>
        </div>
        <div :class="['i-item-c', 'item', {mar25: index === 1}]" v-for="(item,index) in roomAll" :key="index">
          <div class="i-item-c-h yellow">
            <b class="ftz18">{{item.type}}</b>
          </div>
          <div class="all-c">
            <ul>
              <li v-for="(ITEM,INDEX) in item.data" :key="INDEX">
                <router-link :to="`/dashboard/live/${ITEM.userId}`" class="photo photo-level">
                  <img :src="ITEM.avatar">
                  <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                </router-link>
                <div class="info fr">
                  <a href="javascript:;" class="name">{{ITEM.userName}}</a>
                  <span class="fr num">
                    <i class="icon icon-num"></i>{{ITEM.visitNum}}
                    <i class="icon icon-hot"></i>{{ITEM.activeNum}}</span>
                  <p>主题：{{ITEM.topicName}}</p>
                </div>
              </li>
            </ul>
            <div class="indicate">
              <span @click="roomAllPage(0, item, item.page.pageNum < 2)" :class="['icon', 'icon-prev',{'disabled': item.page.pageNum < 2}]"></span>
              <span @click="roomAllPage(1, item, item.page.pageNum >= item.page.pages)" :class="['icon', 'icon-next','',{'disabled': item.page.pageNum >= item.page.pages}]"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 回到页面顶部导航 -->
      <div class="page-guid">
        <a href="javascript:;" class="guid icon icon-book"></a>
        <a href="javascript:;" @click="goTop()" class="guid icon icon-top"></a>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import Guide from '@/components/guide'
import * as api from '@/service/api'
export default {
  components: {
    NavBar,
    Footer,
    Guide
  },
  data () {
    return {
      showGuide: true,
      viewData: {},
      total: null,
      banner: [],
      // showView: false,
      articleList: [],
      layerLoad: null,
      loading: false,
      recommend: [],
      realtime: [],
      realtimeAuto: 0,
      anchor: [],
      roomChoice: [
        {
          type: {
            num: 0,
            name: '短线操作',
            tip: '捕捉热点，解大势、选好股'
          },
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        },
        {
          type: {
            num: 1,
            name: '长线操作',
            tip: '逆向考量，切忌燥、耐心炒'
          },
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        },
        {
          type: {
            num: 2,
            name: '稳健投资',
            tip: '理财有道，学理财、稳增长'
          },
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        },
        {
          type: {
            num: 3,
            name: '陪你唠到天黑'
          },
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        },
        {
          type: {
            num: 4,
            name: '萌妹子会炒股'
          },
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        },
        {
          type: {
            num: 5,
            name: '潜力新星'
          },
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        }
      ],
      roomAll: [
        {
          type: '股票',
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        },
        {
          type: '黄金',
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        },
        {
          type: '外汇',
          page: {
            pageNum: 1,
            pageSize: 5,
            pages: 1
          },
          data: []
        }
      ],
      rank: {
        type: 0,
        page: {
          pageNum: 1,
          pageSize: 5,
          pages: 1
        },
        data: []
      }
    }
  },
  created () {
    this.getMovePicture()
    this.getRealtime(0)
    this.getRecommend()
    this.getAnchor()
    this.getRank(0, 1)
    this.roomAllInit()
    this.roomChoiceInit()
    if (window.layer) {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
    }
  },
  mounted () {
    if (this.$route.query.scroll === 'all') {
      document.documentElement.scrollTop = document.body.scrollTop = 2000
    }
    setTimeout(() => {
      window.layui.use('carousel', function () {
        var carousel = window.layui.carousel
        // 建造实例
        carousel.render({
          elem: '#test1',
          width: '100%',
          height: '500px',
          autoplay: false,
          indicator: 'none',
          arrow: 'always'
        })
      })
    }, 500)
    this.$nextTick(() => {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    })
  },
  methods: {
    // 实时直播
    async getRealtime (time) {
      if (!time) {
        let res = await api.getZBRealtime({
          pageSize: 5
        })
        this.realtime = res.data
      }
      clearTimeout(this.realtimeAuto)
      this.realtimeAuto = setTimeout(async () => {
        let res = await api.getZBRealtime({
          pageSize: 5
        })
        this.realtime = res.data
        this.getRealtime(20000)
      }, time)
    },
    async getMovePicture () {
      let res = await api.getMovePicture({
        columnType: 'webcast'
      })
      this.banner = res.data
    },
    // 每日推荐
    async getRecommend () {
      let res = await api.getZBRecommend({
        pageSize: 4
      })
      this.recommend = res.data
    },
    // 新晋主播
    async getAnchor () {
      let res = await api.getZBAnchor({
        pageSize: 5
      })
      this.anchor = res.data
    },
    // 排行
    async getRank (type, page) {
      this.rank.type = type
      this.rank.page.pageNum = page
      let res = await api.getZBRank({
        ...this.rank.page,
        searchType: type // 0: 人气榜 1:活跃榜
      })
      this.rank.data = res.data.list
      this.rank.page.pages = res.data.pages
    },
    rankPage (n, status) {
      if (status) {
        return false
      }
      if (n) {
        this.rank.page.pageNum++
      } else {
        this.rank.page.pageNum--
      }
      this.getRank(this.rank.type, this.rank.page.pageNum)
    },
    // 全部直播间
    roomAllInit () {
      this.roomAll.map(item => {
        this.getRoomAll(item, 1)
      })
    },
    async getRoomAll (item, page) {
      item.page.pageNum = page
      let res = await api.getZBRoomAll({
        ...item.page,
        keyword: item.type
      })
      item.data = res.data.list
      item.page.pages = res.data.pages
    },
    roomAllPage (n, item, status) {
      if (status) {
        return false
      }
      if (n) {
        item.page.pageNum++
      } else {
        item.page.pageNum--
      }
      this.getRoomAll(item, item.page.pageNum)
    },
    // 精选直播间
    roomChoiceInit () {
      this.roomChoice.map(item => {
        this.getRoomChoice(item, 1)
      })
    },
    async getRoomChoice (item, page) {
      item.page.pageNum = page
      let res = await api.getZBRoomChoice({
        ...item.page,
        searchType: item.type.num
      })
      item.data = res.data.list
      item.page.pages = res.data.pages
    },
    goTop () {
      // document.documentElement.scrollTop = document.body.scrollTop = 0
      let timer = setInterval(function () {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop
        let ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 10)
    },
    roomChoicePage (n, item, status) {
      if (status) {
        return false
      }
      if (n) {
        item.page.pageNum++
      } else {
        item.page.pageNum--
      }
      this.getRoomChoice(item, item.page.pageNum)
    },
    closeGuide () {
      this.showGuide = false
    },
    formatHtml (n) {
      return n && n.replace(/<\/?.+?>/gm, '').replace(/&nbsp;/g, '') || ''
    }
  }
}
</script>
<style lang="scss">
@import "../../style/res/liveIndex";
.liveIndex {
  .rank .icon-hot {
    width: 16px;
    height: 22px;
    display: inline-block;
    background-image: url(../../assets/res/img/icon_index.png);
    background-repeat: no-repeat;
    background-position: -8px -140px;
    margin-left: 6px;
    padding-right: 5px;
  }
  .private:after {
    content: "";
    background: url(../../assets/private.png) no-repeat;
    width: 34px;
    height: 29px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
  }
  .rank .topicNum {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .layui-carousel:hover .layui-carousel-arrow[lay-type="add"],
  .layui-carousel[lay-arrow="always"] .layui-carousel-arrow[lay-type="add"] {
    right: -60px;
  }
  .layui-carousel:hover .layui-carousel-arrow[lay-type="sub"],
  .layui-carousel[lay-arrow="always"] .layui-carousel-arrow[lay-type="sub"] {
    left: -60px;
  }
  .layui-carousel,
  .layui-carousel > [carousel-item] > * {
    background-color: #f2f2f2;
  }
  .icon-prev {
    background-position: -368px -110px;
    transform: rotate(180deg);
    &.disabled {
      background-position: -280px -110px;
      transform: rotate(0deg);
    }
  }
  .icon-next {
    background-position: -368px -110px;
    &.disabled {
      background-position: -280px -110px;
      transform: rotate(180deg);
    }
  }
}
</style>
<style lang="scss" scoped>
.liveIndex .real-c .info .info-c {
  padding: 10px 15px;
  height: auto;
  line-height: 1.5;
  img {
    max-width: 90%;
  }
}
.banner img {
  width: 1200px;
  height: 356px;
}
</style>
